<template>
  <a-spin :spinning="confirmLoading">
    <a-form ref="formRef" class="antd-modal-form" :labelCol="labelCol" :wrapperCol="wrapperCol">
      <a-row>
        <a-divider type="vertical" class="antd-modal-divider" />
        <h4 class="hClass">产品信息</h4>
      </a-row>
      <a-row>
        <a-col :span="8">
          <a-form-item label="产品名称" v-bind="validateInfos.tailName">
            <a-input v-model:value="formData.tailName" placeholder="" :disabled="disabled"></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="产品八位码" :label-col="{ span: 6 }" v-bind="validateInfos.tailCode">
            <a-input v-model:value="formData.tailCode" placeholder="" :disabled="disabled"
              style="width: 205px !important"></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="规格型号" v-bind="validateInfos.tailModel">
            <a-input v-model:value="formData.tailModel" placeholder="" :disabled="disabled"></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="产品材质" v-bind="validateInfos.tailMaterial">
            <a-input v-model:value="formData.tailMaterial" placeholder="" :disabled="disabled"></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="生产厂家" v-bind="validateInfos.tailFactory">
            <a-input v-model:value="formData.tailFactory" placeholder="" :disabled="disabled"></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="生产日期" v-bind="validateInfos.tailDate">
            <a-date-picker placeholder="" v-model:value="formData.tailDate" value-format="YYYY-MM-DD"
              style="width: 100%" :disabled="disabled" />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="产品状态" v-bind="validateInfos.tailState">
            <a-input v-model:value="formData.tailState" placeholder="" :disabled="disabled"></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="产品批号" v-bind="validateInfos.tailBatch">
            <a-input v-model:value="formData.tailBatch" placeholder="" :disabled="disabled"></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="商标" v-bind="validateInfos.tailBrand">
            <a-input v-model:value="formData.tailBrand" placeholder="" :disabled="disabled"></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="原编号" v-bind="validateInfos.tailNumber">
            <a-input v-model:value="formData.tailNumber" placeholder="" :disabled="disabled"></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="产品包装" v-bind="validateInfos.tailPackage">
            <j-dict-select-tag v-model:value="formData.tailPackage" dictCode="sample_pack" :show-choose-option="false"
              :disabled="disabled" />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="入库日期" v-bind="validateInfos.tailWareDate">
            <a-date-picker placeholder="" v-model:value="formData.tailWareDate" value-format="YYYY-MM-DD"
              style="width: 100%" :disabled="disabled" />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="产品等级" v-bind="validateInfos.tailRank">
            <a-input v-model:value="formData.tailRank" placeholder="" :disabled="disabled"></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="存放条件" v-bind="validateInfos.tailStorage">
            <a-input v-model:value="formData.tailStorage" placeholder="" :disabled="disabled"></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="采购合同" v-bind="validateInfos.contract">
            <a-input v-model:value="formData.contract" placeholder="" :disabled="disabled"></a-input>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="8">
          <a-form-item label="采购技术规格书" :label-col="{ span: 8 }" v-bind="validateInfos.technical">
            <j-dict-select-tag v-model:value="formData.technical" dictCode="have_not" :show-choose-option="false"
              :disabled="disabled" style="width: 180px !important" />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="产品合格证" :label-col="{ span: 6 }" v-bind="validateInfos.certificate">
            <j-dict-select-tag v-model:value="formData.certificate" dictCode="have_not" :show-choose-option="false"
              :disabled="disabled" style="width: 205px !important" />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="产品质量证明书" :label-col="{ span: 8 }" v-bind="validateInfos.quality">
            <j-dict-select-tag v-model:value="formData.quality" dictCode="have_not" :show-choose-option="false"
              :disabled="disabled" style="width: 178px !important" />
          </a-form-item>
        </a-col>
        
        
      </a-row>
      <a-row>
        <a-divider type="vertical" class="antd-modal-divider" />
        <h4 class="hClass">抽样信息</h4>
      </a-row>
      <a-row>
        <a-col :span="8">
          <a-form-item label="抽样单位" v-bind="validateInfos.spotEntName">
            <a-input v-model:value="formData.spotEntName" placeholder="" :disabled="disabled"></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="受检单位" v-bind="validateInfos.entName">
            <a-input v-model:value="formData.entName" placeholder="" :disabled="disabled"></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="抽样地点" v-bind="validateInfos.spotAddress">
            <a-input v-model:value="formData.spotAddress" placeholder="" :disabled="disabled"></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="抽样时间" v-bind="validateInfos.spotDate">
            <a-date-picker placeholder="" v-model:value="formData.spotDate" value-format="YYYY-MM-DD"
              style="width: 100%" :disabled="disabled" />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="抽样基数" v-bind="validateInfos.spotBase">
            <a-input v-model:value="formData.spotBase" placeholder="" :disabled="disabled"></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="抽取样品量" :label-col="{ span: 6 }" v-bind="validateInfos.spotAmount">
            <a-input v-model:value="formData.spotAmount" placeholder="" :disabled="disabled"
              style="width: 205px !important"></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="抽样方式" v-bind="validateInfos.spotWay">
            <a-input v-model:value="formData.spotWay" placeholder="" :disabled="disabled"></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="样品储运方式" :label-col="{ span: 7 }" v-bind="validateInfos.spotStoreWay">
            <a-input v-model:value="formData.spotStoreWay" placeholder="" :disabled="disabled"
              style="width: 192px !important"></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="封样形式" v-bind="validateInfos.spotSealed">
            <a-input v-model:value="formData.spotSealed" placeholder="" :disabled="disabled"></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="抽样标准" v-bind="validateInfos.spotStandard">
            <a-input v-model:value="formData.spotStandard" placeholder="" :disabled="disabled"></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="供方类别" v-bind="validateInfos.spotCategory">
            <a-input v-model:value="formData.spotCategory" placeholder="" :disabled="disabled"></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="是否危险品" :label-col="{ span: 6 }" v-bind="validateInfos.riskChemicla">
            <j-dict-select-tag v-model:value="formData.riskChemicla" dictCode="yn" :show-choose-option="false"
              :disabled="disabled" style="width: 205px !important" />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="备注" v-bind="validateInfos.remark">
            <a-input v-model:value="formData.remark" placeholder="" :disabled="disabled"
              style="width: 890px !important"></a-input>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-divider type="vertical" class="antd-modal-divider" />
        <h4 class="hClass">其他信息</h4>
      </a-row>
      <a-row>
        <a-col :span="8">
          <a-form-item label="抽样人" v-bind="validateInfos.spotPerson">
            <a-input v-model:value="formData.spotPerson" placeholder="" :disabled="disabled"></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="陪同抽样人" :label-col="{ span: 6 }" v-bind="validateInfos.peerSpotPerson">
            <a-input v-model:value="formData.peerSpotPerson" placeholder="" :disabled="disabled"
              style="width: 205px !important"></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="受检单位代表" :label-col="{ span: 7 }" v-bind="validateInfos.entPerson">
            <a-input v-model:value="formData.entPerson" placeholder="" :disabled="disabled"
              style="width: 190px !important"></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="抽样单" name="superviseAtta">
            <JUpload v-model:value="formData.superviseAtta" :disabled="disabled"></JUpload>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="质量标准附件" :label-col="{ span: 7 }" v-bind="validateInfos.criterionAtta">
            <JUpload v-model:value="formData.criterionAtta" :disabled="disabled"></JUpload>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </a-spin>
</template>

<script lang="ts" setup>
import { ref, reactive, defineExpose, nextTick, defineProps, computed } from 'vue';
import { useMessage } from '/@/hooks/web/useMessage';
import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectTag.vue';
import JUpload from '/@/components/Form/src/jeecg/components/JUpload/JUpload.vue';
import { saveOrUpdate } from '../SiteSampleList.api';
import { Form } from 'ant-design-vue';

const props = defineProps({
  formDisabled: { type: Boolean, default: false },
  formData: { type: Object, default: () => { } },
  formBpm: { type: Boolean, default: true },
  auditMark: { type: String, default: '' },
});

const formRef = ref();
const useForm = Form.useForm;
const emit = defineEmits(['register', 'ok']);
const formData = reactive<Record<string, any>>({
  id: '',
  entName: '',
  spotPerson: '',
  peerSpotPerson: '',
  entPerson: '',
  handler: '',
  handlDate: '',
  tailName: '',
  tailCode: '',
  tailMaterial: '',
  tailModel: '',
  tailFactory: '',
  tailDate: '',
  tailState: '',
  tailBatch: '',
  tailPackage: '',
  tailWareDate: '',
  tailRank: '',
  tailStorage: '',
  checkType: '',
  sampleTypeId: '',
  sampleType: '',
  sampleSortId: '',
  sampleSort: '',
  testItemsIds: [],
  testItems: [],
  contract: '',
  criterionAtta: '',
  technical: '',
  certificate: '',
  quality: '',
  spotEntName: '天研院气田开发化学实验室',
  spotAddress: '',
  spotDate: '',
  spotBase: '',
  spotAmount: '',
  spotWay: '',
  spotStoreWay: '',
  spotSealed: '',
  spotCategory: '',
  spotStandard: '',
  remark: '',
  allotStatus: '未分配',
  entrustType: '监督检验',
  carryName: '中国石油西南油气田分公司天然气研究院气田开发化学实验室',
  carryAddress: '四川省成都市天府新区华阳天研路218号 610213',
  carryContact: '印  敬/(028)85604123  13880486175  张楠革/(028)85604594  13618090676',
  codeRule: 'JXY',
  auditMark: '制单中',
  superviseAtta: '',
  sortsList: [],
  itemsList: [],
  labSampleList: [],
  riskChemicla: '',
  tailBrand: '',
  tailNumber: '',
  finalAuditId: '',
  finalAudit: '',
  returnCause: '',
});
const { createMessage } = useMessage();
const labelCol = ref<any>({ xs: { span: 24 }, sm: { span: 5 } });
const wrapperCol = ref<any>({ xs: { span: 24 }, sm: { span: 16 } });
const confirmLoading = ref<boolean>(false);
//表单验证
const validatorRules = {};
const { resetFields, validate, validateInfos } = useForm(formData, validatorRules, { immediate: true });

// 表单禁用
const disabled = computed(() => {
  if (props.formBpm === true) {
    if (props.formData.disabled === false) {
      return false;
    } else {
      return true;
    }
  }
  return props.formDisabled;
});

/**
 * 新增
 */
function add() {
  edit({});
}

/**
 * 编辑
 */
function edit(record) {
  nextTick(async () => {
    resetFields();
    //赋值
    Object.assign(formData, record);
  });
}


/**
 * 提交数据
 */
async function submitForm() {
  // 触发表单验证
  await validate();
  confirmLoading.value = true;
  const isUpdate = ref<boolean>(false);
  //时间格式化
  let model = formData;
  if (formData.id != null && formData.id != '') {
    isUpdate.value = true;
  }
  await saveOrUpdate(model, isUpdate.value)
    .then((res) => {
      if (res.success) {
        createMessage.success(res.message);
        emit('ok');
      } else {
        createMessage.warning(res.message);
      }
    })
    .finally(() => {
      confirmLoading.value = false;
    });
}

defineExpose({
  add,
  edit,
  submitForm,
  formData,
});
</script>

<style lang="less" scoped>
.antd-modal-form {
  min-height: 500px !important;
  overflow-y: auto;
  padding: 24px 24px 24px 24px;
}

.hClass {
  width: 160px;
  height: 20px;
  font-size: 14px;
  font-family: Microsoft YaHei-Regular, Microsoft YaHei;
  font-weight: 550;
  color: #009688;
  line-height: 14px;
}

.ant-form-item-label {
  width: 150px;
  height: 20px;
  font-size: 14px;
  font-family: Microsoft YaHei-Regular, Microsoft YaHei;
  font-weight: 400;
  color: #727272;
  line-height: 20px;
}

.ant-input {
  width: 220px;
  height: 32px;
  border-radius: 4px 4px 4px 4px;
  opacity: 1;
  border: 1px solid #dddddd;
}

.ant-picker {
  width: 220px !important;
  height: 32px;
  border-radius: 4px 4px 4px 4px;
  opacity: 1;
  border: 1px solid #dddddd;
}

.signBox {
  display: flex;
  width: 100%;
}

.signBoxLabel {
  margin-right: 50px;
  display: flex;
  padding-left: 20px;
}

.signImg {
  width: 200px;
}
</style>
